import ReactEcharts from 'echarts-for-react';
import echarts from 'echarts';
import PropTypes from 'prop-types';

function Line ({data}) {

  const {xLabel, value, title, name,} = data
  const companys= data.filter(item=>item.company).map(item=>item.company)
  //取公司数组
  //const company= data.filter(item=>item.company)
  // console.log('',company);
  //取数组里的公司名
  //const companys= company.map(item=>item.company)
  // console.log('>>>>>>>>>>',companys);
  // const companys=["公共关系部", "咨询管理部", "综合福利事业部", "蓝众律所", "国际教育",
  //     "天拓公司", "蓝圣BPO", "招聘猎头事业部", "华东区小计", "上二", "上一", "上三", "南京",
  //     "苏州", "无锡", "杭州", "华南区小计", "郑州", "武汉", "长沙", "广1", "深圳", "成都",
  //     "重庆", "广2", "华北区小计", "哈尔滨", "北京", "大连一", "大连二", "沈阳", "长春", "天津", "青岛", "济南"]

//遍历公司对象，一个折线图对应一个公司
const series = companys.map((item)=>{ //外循环
  const values = data.filter(key=>key.company===item); //内循环
  return  {
     name: item,
     smooth:true, //折线变圆滑
     type: 'line',
     data: values.map(item=>item.integralAccumulated) //积分累计
   }
})
  const option = {
    title: {
        text: title,
        left: 'center'
    },
    tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b} : {c}'
    },
    legend: {
        left: 'left',
        data: companys
    },
    xAxis: {
        type: 'category',
        name: '月/X',
        splitLine: {show: false},
        data: ['1月','2月','3月','4月','5月']
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    yAxis: {
        type: 'value',
        name: '指数/Y'
    },
    series:series
};

  return (
        <ReactEcharts
          option={option}
          style={{height: '50vh', width: '100%'}}
        />
  )
}
Line.propTypes = {
  data: PropTypes.array.isRequired,//组件配置
  // xLabel: PropTypes.array.isRequired,//x轴的字段名称
  // value: PropTypes.array.isRequired,//y轴数据值
  // title: PropTypes.string,//组件名称
  // name: PropTypes.string//数据名称
};
export default Line;
